<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07_遍历操作</title>
		<!-- 元素遍历操作   针对 DOM树中父元素进行遍历【父子级关系】
		 children()       功能：获取匹配元素集合中每个元素的直接子元素
		 parent()         功能：获取匹配元素集合中每个元素的直接父元素
		 
		 siblings()       功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()           功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()           功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()           功能：遍历匹配元素集合，对每个元素执行指定的函数
		 -->
	</head>
	<style>
		.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
				}
		.box{
				background-color: #55aaff;
			    margin: 10px;
				padding: 10px;
		   }
		button{
	     		margin: 5px;
			}
	</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
			<button id="getcrBtn">获取直接子元素</button>
			<button id="getpBtn">获取直接父元素</button>
			<button id="getsBtn">获取兄弟元素</button>
			<button id="getnbtn">获取下一个兄弟元素</button>
			<button id="getpbtn">获取上一个兄弟元素</button>
			<button id="eachBtn">遍历元素</button>
	        <script>
		       // 1.点击获取直接子元素按钮   container父元素给.box元素加 10px边框
			$("#getcrBtn").click(function(){
	     		$(".container").children().css("border","10px solid #f00");	
				});
				// 2.点击 获取直接子元素 按钮  .container父元素  加背景色 #ff0
				$("#getpBtn").click(function(){
					$("#box2").parent().css("background-color","#ff0");
				});
	            //3.点击获取兄弟元素按钮  box3的兄弟元素  加背景色
				$("#getsBtn").click(function(){
					$("#box3").siblings().css("background-color","  #ffaa7f")
				});
				//4.点击获取下一个兄弟元素按钮  box2的兄弟元素  加背景色
				$("#getnbtn").click(function(){
					$("#box2").next().css("background-color","#aa55ff")
				});
				//5.点击获取上一个兄弟元素按钮  box4的兄弟元素  圆 阴影 字体放大
				$("#getpbtn").click(function(){
					$("#box4").prev().css({"width":"100px",
					                       "height":"100px",
										   "border-radius":"50%",
										   "background":"#5500ff",
										   "text-shadow":"5px 5px 10px #ffaa7f",
										   "font-size":"2em",
										   "line-height":"100px",
										   "text-alige":"center"
										   });
				});
				/* 6.点击 遍历元素 按钮  实现 动态输出这是box1  ....
				     each(function(index,element){ 
						 识别传入下标${index}  
						 
						 })
				 */
				$("#eachBtn").click(function(){
					 $(".box").each(function(i,e){ // i 下标| e 元素 --形参
						$(e).text(`这是第${i+1}盒子`);
					});
				});
			</script>
		</body>
	</html>